<template>
    <ul class="weekchoose">
        <li>{{ currentDate }}</li>
        <li v-for="(item, index) in weekList" :key="index" @click="handleWeekChange(item)">
            <span class="date">{{ item.fill }}</span>
            <span class="state"></span>
            <span class="week">{{ item.week }}</span>
        </li>
    </ul>
</template>

<script>
export default {
    components: {  },
    props: {  },
    data() {
        return {
            weekList: [],

            currentDate: '',
        };
    },
    props: {
        weekStart: {                            //  周开始时间   周日开始  false   周一开始   true
            type: Boolean,
            default: false
        },
    },
    watch: {
        
    },
    computed: {
        formatWeekDesc() {
            return this.weekStart?['一', '二', '三', '四', '五', '六', '日']:['日', '一', '二', '三', '四', '五', '六']
        }
    },
    methods: {

        getWeekStartEndDate(date) {
            this.weekList = []

            const current = date ? date : new Date();
            
            let nowDayOfWeek = current.getDay();

            if(!this.weekStart) {
                nowDayOfWeek += 1
            } 
            
            const daySecond = 24 * 60 * 60 * 1000;
            
            let startDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * daySecond);
            let endDate = new Date(new Date(startDate).valueOf() + 6 * daySecond);

            // 拿到开始结束时间
            let startTime = startDate.getDate()
            let endTime = endDate.getDate()

            // 起始时间的年 月
            var year = +startDate.getFullYear() 
            var month = +startDate.getMonth() + 1

            // 开始日期大于结束日期这个情况
            if(startTime > endTime) {
                // 拿到开始日期这个月总共几天
                let monthDays = this.getMonthDays(year, month)
                // 这个月占了几天
                let beforeWeekNum = monthDays - startTime
                // 剩余几天
                let surplusWeekNum = 7 - beforeWeekNum

                // 把这个月的结余添加进去
                for(let j = 0; j <= beforeWeekNum; j ++ ) {
                    this.weekList.push(
                        { 
                            fill: startTime + j, 
                            state: '', 
                            week: this.formatWeekDesc[j], 
                            date: `${year}-${this.getMonthStrict(month)}-${this.getMonthStrict(startTime + j)}`, 
                        }
                    )
                }
                // 这就是新的月份了
                for(let k = 1; k < surplusWeekNum; k ++) {
                    this.weekList.push(
                        { 
                            fill: k, 
                            state: '', 
                            week: this.formatWeekDesc[beforeWeekNum + k], 
                            date: `${year}-${this.getMonthStrict(month)}-${this.getMonthStrict(k)}`, 
                        }
                    )
                }
            } else {
                // 这个就是普通的当月日期
                for(let h = 0; h < 7; h ++ ) {
                    this.weekList.push(
                        { 
                            fill: startTime + h, 
                            state: '', 
                            week: this.formatWeekDesc[h], 
                            date: `${year}-${this.getMonthStrict(month)}-${this.getMonthStrict(startTime + h)}`, 
                        }
                    )
                }
            }

        },

        getDateStrict(parmas) {
            var date = +parmas.getDate()
            var month = +parmas.getMonth() + 1
            var year = +parmas.getFullYear()
            return `${ year }-${ this.getMonthStrict(month) }-${ this.getMonthStrict(date) }`
        },


        //  得到当前年这个月分有多少天
        getMonthDays(Y, M) {
            let day = new Date(Y, M, 0).getDate() 
            return day;
        },

        //  为了参数补0操作
        getMonthStrict(month) {
            return (month / 10) >= 1 ? month: `0${month}` 
        },


        handleWeekChange(item) {
            this.currentDate = item.date
            console.log('item', item)
            this.$emit('change', item)
        }
    },
    created() {
        
    },
    mounted() {
        this.getWeekStartEndDate()
    },
};
</script>
<style lang="scss" scoped>
 
</style>